<template>
  <view class="box">
    <u-form labelWidth="auto" :model="task">
      <u-form-item label="任务名称" borderBottom>
        <u-input v-model="task.title"></u-input>
      </u-form-item>
      <u-form-item label="项目名称" borderBottom>
        <u-input disabled v-model="task.projectName"></u-input>
      </u-form-item>
      <u-form-item label="负责人" borderBottom>
        <member-select :project-id="task.projectId" v-model="task.assignedTo"></member-select>
      </u-form-item>
      <u-form-item label="任务类型" borderBottom>
        <my-select type-name="task_type" v-model="task.type"></my-select>
      </u-form-item>
      <u-form-item label="优先级" borderBottom>
        <my-select type-name="task_priority" v-model="task.priority"></my-select>
      </u-form-item>
      <u-form-item label="任务状态" borderBottom>
        <my-select type-name="task_status" v-model="task.status"></my-select>
      </u-form-item>
      <u-form-item label="开始日期" borderBottom @click="calendarShow = true; selectedField = 'startDate';">
        <u-input disabled v-model="task.startDate"></u-input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
      <u-form-item label="结束日期" borderBottom @click="calendarShow = true; selectedField = 'dueDate';">
        <u-input disabled v-model="task.dueDate"></u-input>
        <u-icon slot="right" name="arrow-right"></u-icon>
      </u-form-item>
      <u-form-item label="创建时间" borderBottom>
        <u-input disabled v-model="task.createdAt"></u-input>
      </u-form-item>
      <u-form-item label="更新时间" borderBottom>
        <u-input disabled v-model="task.modifiedAt"></u-input>
      </u-form-item>
    </u-form>
    <u-button type="primary" text="确定" @click="updateData"></u-button>
    <u-calendar mode="range" :show="calendarShow" @close="()=>{calendarShow=false}"
                @confirm="(e)=>{task.startDate=e[0];task.dueDate=e[e.length-1]; calendarShow=false}">
    </u-calendar>
  </view>
</template>

<script>
import { getTask, updateTask } from "../../../api/project/task";
import MySelect from "../../../components/my-select/my-select.vue";
import MemberSelect from "../../../components/member-select/member-select.vue";

export default {
  components: {MemberSelect, MySelect},
  data() {
    return {
      taskId: '',
      task: {},
      calendarShow: false,
      selectedField: ''
    };
  },
  onLoad(options) {
    if (options.taskId) {
      this.taskId = options.taskId;
      this.getData();
    }
  },
  methods: {
    getData() {
      getTask(this.taskId).then(res => {
        this.task = res.data;
      });
    },
    updateData() {
      updateTask(this.task).then(() => {
        uni.showToast({
          title: '修改成功',
          icon: 'success',
          duration: 2000
        });
      });
    }
  }
};
</script>

<style>
.box {
  margin: 10rpx;
}
</style>